<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>AI Assistant</title>
    <script type="text/javascript" src="scripts/plugins.js"></script>
    <script type="text/javascript" src="scripts/plugins-ui.js"></script>
    <link rel="stylesheet" href="styles/plugins.css" />
    <link rel="stylesheet" href="styles/style.css" />
    <script type="text/javascript" src="scripts/index.js"></script>
  </head>

  <body>
    <div class="container">
      <div class="header">
        <div class="title-wrapper">
          <img class="icon" src="./resources/ai-bot.svg" alt="" />
          <div class="title">AI Assistant</div>
        </div>
        <div class="action-wrapper">
          <div class="action ai-analyze">
            <img class="icon" src="./resources/ai-anlayze.svg" alt="" />
            <div>AI Analyze</div>
          </div>
          <div class="action close">
            <img
              class="icon"
              src="./resources/close.svg"
              alt=""
              id="kloud_close"
            />
          </div>
        </div>
      </div>
      <div class="content">
        <div class="result-wrapper" style="display: none" id="kloud_result_div">
          <div class="result" id="kloud_result" style="display: none"></div>
          <div class="loading-wrapper" id="kloud_loading">
            <div class="loading"></div>
            <div>AI is writing...</div>
          </div>
        </div>
        <div class="action-wrapper" style="display: none" id="kloud_action_div">
          <div class="btn active" id="kloud_action_replace">
            <span>Replace</span>
          </div>
          <div class="btn" id="kloud_action_insert">
            <span>Insert below</span>
          </div>
          <div class="btn" id="kloud_action_try_again">
            <span>Try again</span>
          </div>
          <div class="btn" id="kloud_action_copy">
            <span>Copy</span>
          </div>
          <div class="btn disabled" id="kloud_action_stop">
            <span>Stop</span>
          </div>
        </div>
        <div class="selected-text-wrapper" id="kloud_selected_text_div">
          <div class="title">Selected text:</div>
          <div class="text-wrapper" id="ellipsis_text_div">
            <div class="text" id="kloud_selected_text">获取中...</div>
            <div class="action">
              <img
                id="text-action-more"
                class="more"
                src="./resources/icon-more.svg"
                alt=""
              />
            </div>
          </div>
          <div
            class="text-wrapper"
            style="display: none"
            id="kloud_selected_full_text"
          ></div>
        </div>
        <div class="message-wrapper">
          <div class="input-wrapper">
            <input
              type="text"
              placeholder="AI writing instruction"
              id="kloud_input"
            />
            <img class="icon" src="./resources/icon-history.svg" alt="" />
          </div>
          <div class="enter-button" id="kloud_enter">
            <img class="icon" src="./resources/icon-enter.svg" alt="" />
          </div>
        </div>
      </div>
    </div>
  </body>
</html>
